<template>
  <div class="container">
    <div class="btn-box">
      <el-button type="primary" @click="addNewData"> 新增 </el-button>
    </div>
    <el-table
      :data="data"
      stripe
      border
      :cell-class-name="tableCellClassName"
      size="small"
      @cell-click="cellClick"
    >
      <el-table-column label="冷藏温度">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.temperature"
              controls-position="right"
              ref="temperatureRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.temperature }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="单位">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-select v-model="scope.row.temperatureUnit" size="small" ref="temperatureUnitRef">
              <el-option value="C"> </el-option>
              <el-option value="F"> </el-option>
            </el-select>
          </div>

          <span v-else>
            {{ scope.row.temperatureUnit }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="冷藏通风量">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input-number
              v-model="scope.row.ventilationQuantity"
              controls-position="right"
              ref="ventilationQuantityRef"
              size="small"
            >
            </el-input-number>
          </div>
          <span v-else>
            {{ scope.row.ventilationQuantity }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="风门">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-select
              v-model="scope.row.damperSwitch"
              size="small"
              ref="damperSwitchRef"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <span v-else>
            {{ scope.row.damperSwitch }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="danger" @click="deleteData(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    //详细数据
    tableData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:tableData"],
  computed: {
    data: {
      get() {
        return this.tableData;
      },
      set(value) {
        this.$emit("update:tableData", value);
      },
    },
  },
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引

      options: [
        {
          value: "开",
          label: "开",
        },
        {
          value: "关",
          label: "关",
        },
        {
          value: "半开",
          label: "半开",
        },
        {
          value: 10,
          label: "10",
        },
        {
          value: 20,
          label: "20",
        },
        {
          value: 30,
          label: "30",
        },
        {
          value: 40,
          label: "40",
        },
        {
          value: 50,
          label: "50",
        },
        {
          value: 60,
          label: "60",
        },
        {
          value: 70,
          label: "70",
        },
        {
          value: 80,
          label: "80",
        },
      ],
    };
  },
  methods: {
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
      this.$nextTick(() => {
        if (column.label == "冷藏温度") {
          this.$refs["temperatureRef"].focus();
        } else if (column.label == "单位") {
          this.$refs["temperatureUnitRef"].focus();
        } else if (column.label == "冷藏通风量") {
          this.$refs["ventilationQuantityRef"].focus();
        } else if (column.label == "风门") {
          this.$refs["damperSwitchRef"].focus();
        }
      });
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1;
      this.columnIndex = -1;
    },
    addNewData() {
      this.data.push({
        temperature: 0,
        temperatureUnit: "C",
        ventilationQuantity: 0,
        damperSwitch: "",
      });
    },
    deleteData(index){
      this.data.splice(index,1)
    }
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
.container {
  padding: 8px 0 0 8px;
  .btn-box {
    margin-bottom: 8px;
  }
}
</style>
